import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { select, Store } from '@ngrx/store';
import { NzCarouselComponent } from 'ng-zorro-antd/carousel';
import { map } from 'rxjs/internal/operators';
import { Banner, HotTag, Singer, SongSheet } from 'src/app/services/data-types/common.types';
import { User } from 'src/app/services/data-types/member.type';
import { MemberService } from 'src/app/services/member.service';
import { SheetService } from 'src/app/services/sheet.service';
import { AppStoreModule } from 'src/app/store';
import { BatchActionsService } from 'src/app/store/batch-actions.service';
import { ModalTypes } from 'src/app/store/reducers/member.reducer';
import { getMember, getUserId } from 'src/app/store/selectors/member.selector';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {
  carouselActiverIndex:number = 0;
  banners:Banner[] | undefined;
  hotTags:HotTag[] | undefined;
  sheetList:SongSheet[] | undefined;
  singers:Singer[] | undefined;
  @ViewChild(NzCarouselComponent,{static:true}) private nzCarousel!: NzCarouselComponent;
  user!: User
  constructor(
    private sheetService: SheetService,
    private route:ActivatedRoute,
    private batchActionsServe: BatchActionsService,
    private router: Router,
    private store$: Store<AppStoreModule>,
    private memberServe: MemberService,
    ) {
      this.route.data.pipe(map((res:any)=>res.homeDatas)).subscribe(([banners,hotTags,sheetList,singers])=>{
        // console.log("res:",res)
        this.banners = banners
        this.hotTags = hotTags
        this.sheetList = sheetList
        this.singers = singers
        // this.user = user
      })
      this.store$.pipe(select(getMember), select(getUserId)).subscribe(id =>{
        if(id){
          this.getUserDetail(id)
        }else{
          let userNull!: User
          this.user = userNull
        }
      })
  }
  private getUserDetail(id:string){
    this.memberServe.getUserDetail(id).subscribe(user => this.user = user)
  }
  ngOnInit(): void {
  }
  onBeforeChange(event:any){
    this.carouselActiverIndex = event.to
  }
  onChangeSlide(type:"pre" | "next"){
    this.nzCarousel[type]()
  }
  onPlaySheet(id:number){
    this.sheetService.playSheet(id).subscribe(list=>{
      this.batchActionsServe.selectPlayList({list, index: 0 })
    })
  }
  toInfo(id:number){
    this.router.navigate(['/sheetInfo',id])
  }
  openModal (){
    this.batchActionsServe.controlModal(true, ModalTypes.Default)
  }
}
